﻿<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head><link rel="stylesheet" href="${ctx}/common/common.css">
<title>Title</title>
<link rel="stylesheet"
	href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet"
	href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all">
<script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>
    
<script src="${ctx}/common/plugins/publicJs/publicJs.js"></script>
<style type="text/css">
.rowtop {
	padding: 10px
}
</style>
</head>
<body>
	<form class="layui-form" action="${ctx}/semiFinishedGoods/${action}">
		<input type="hidden" name="id" value="${entity.id}" />
		<div class="layui-row rowtop" style="margin-top: 20px;">
			<div class="layui-col-md5">
				<label class="layui-form-label">产品名称<span style="color: red">*</span></label>
				<div class="layui-input-block">
					<input type="text" name="name" required value="${entity.name}"
						lay-verify="required" maxlength="10" placeholder="请输入产品名称" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-col-md5">
				<label class="layui-form-label">规格<span style="color: red">*</span></label>
				<div class="layui-input-block">
					<input type="text" name="specifications" lay-verify="required"
						value="${entity.specifications}" placeholder="请输入规格"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-row rowtop">
			<div class="layui-col-md5">
				<label class="layui-form-label">产品类型<span style="color: red">*</span></label>
				<div class="layui-input-block">
					<input type="hidden" name="t_p_id" id="t_p_id"
						value="${entity.t_p_id}" class="layui-input"> <input
						readonly id="classilyName" lay-type="showPerson"
						value="${classifyEntity.name}" lay-verify="required"
						placeholder="请选择产品类别" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-col-md5">
				<label class="layui-form-label">生产许可编号<span style="color: red">*</span></label>
				<div class="layui-input-block">
					<input type="text" name="p_license" lay-verify="required|pLicense"
						value="${entity.p_license}" placeholder="请输入生产许可编号"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-row rowtop">
			<div class="layui-col-md5">
				<label class="layui-form-label">生产厂家<span style="color: red">*</span></label>
				<div class="layui-input-block">
					<input type="text" name="manufacturer" lay-verify="required"
						value="${entity.manufacturer}" placeholder="请输入生产厂家"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-col-md5">
				<label class="layui-form-label">证照编号<span style="color: red">*</span></label>
				<div class="layui-input-block">
					<input type="text" name="code" lay-verify="required|code"
						value="${entity.code}" placeholder="请输入证照编号" autocomplete="off"
						class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-row rowtop">
			<div class="layui-col-md5">
				<label class="layui-form-label">有效期(天)<span style="color: red">*</span></label>
				<div class="layui-input-block">
					<input type="text" name="expiry_date" lay-verify="expiryDate"
						value="${entity.expiry_date}" placeholder="请输入有效期天数"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-col-md5">
				<label class="layui-form-label">执行标准<span style="color: red">*</span></label>
				<div class="layui-input-block">
					<input type="text" name="perf_standard" lay-verify="required"
						value="${entity.perf_standard}" placeholder="请输入执行标准"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-row rowtop">
			<div class="layui-col-md5">
				<label class="layui-form-label">单件容量</label>
				<div class="layui-input-block">
					<input type="text" name="single_capacity"
						value="${entity.single_capacity}" placeholder="请输入容量"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-col-md5">
				<label class="layui-form-label">单件重量</label>
				<div class="layui-input-block">
					<input type="text" name="single_weight"
						value="${entity.single_weight}" placeholder="请输入重量"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-row rowtop">
			<div class="layui-col-md5">
				<label class="layui-form-label">单件体积</label>
				<div class="layui-input-block">
					<input type="text" name="single_volume"
						value="${entity.single_volume}" placeholder="请输入单件体积"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-col-md5">
				<label class="layui-form-label">单位<span style="color: red">*</span></label>
				<div class="layui-input-block">
					<input type="text" name="unit" lay-verify="required"
						value="${entity.unit}" placeholder="请输入单位"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-row rowtop">
			<div class="layui-form-item layui-upload">
			  <button type="button" class="layui-btn" id="test2">选择图片</button>
			  <button type="button" class="layui-btn" id="uploadSubmit">上传</button>  
			  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
			    	预览图：
			    <div class="layui-upload-list" id="demo2">
			    <c:forEach items="${imgList}" var="img">
			    	<div id="delDiv">
			    		<img style="width: 100px;height: 100px;" src="${ctx}${img.pictureImgT}" class="layui-upload-img">
			    		<button type="button" id="delImg" class="layui-btn layui-btn-sm delImg" value="${img.id}">删除</button>
			    	</div>
			    </c:forEach>
			    </div>
			 </blockquote>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" id="formBtn" lay-submit
					lay-filter="formDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				<button type="button" id="rollback" class="layui-btn layui-btn-primary">返回</button>
			</div>
		</div>
		<input type="hidden" id="imgId" name="imgId">
    	<input type="hidden" id="tImgId" name="tImgId">
	</form>
	<script>
		//Demo
		layui.use(['form','layer'], function() {
			var $ = layui.$,layer = layui.laye,form = layui.form;

			form.verify({
				expiryDate : function(value, item) { //value：表单的值、item：表单的DOM对象
					var reg = /^[+]{0,1}(\d+)$/;
					if (!reg.test(value)) {
						return '有效期（天数）为正整数';
					}
				},
				pLicense: function(value, item) {
					if(!/^[a-zA-Z\d]+$/.test(value)){
						return '许可证编号只能输入数字和英文';
					}
				},
				code: function(value, item) {
					if(!/^[a-zA-Z\d]+$/.test(value)){
						return '证照编号只能输入数字和英文';
					}
				}
			});

			//监听提交
			form.on('submit(formDemo)', function(data) {
				/* if($("#demo2 img").length == 0){
					alert("请上传图片");
					return false;
				} else { */
					layer.load(1, {
						shade : [ 0.1, '#fff' ]
					//0.1透明度的白色背景
					});
					$("#formBtn").attr("disabled", true);
// 				}
			});
		});
		layui.use(['upload','layer'], function(){
	    	  var $ = layui.$
	    	  ,upload = layui.upload,layer = layui.layer;
	    	  
	    	  document.getElementById("classilyName").addEventListener("click",function() {
					layer.open({
						type : 2,
						skin : 'layui-layer-rim', //加上边框
						area : [ '30%', '80%' ], //宽高
						content : '${ctx}/products/queryProCla'
					});
					form.render();
				})
	    	  
	    	//多图片上传
		   	  upload.render({
		   	    elem: '#test2'
		   	    ,url: '${ctx}/products/uploadFile'
		   	    ,multiple: true
		   	    ,auto:false
		   	    ,async:false
		   	    ,exts:'jpg|png'
		   	    ,bindAction: '#uploadSubmit'
		   	    ,before: function(obj){
		   	    	
		   	    },
			   	choose: function(obj) {
		             var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
		             obj.preview(function(index, file, result){
		            	 var div = $('#demo2').append('<div><img style="width: 100px;height: 100px;" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img"><button type="button" class="layui-btn layui-btn-sm demo-delete">删除</button><input type="hidden" id="imgId_'+index+'" name="imgId"><input type="hidden" id="tImgId_'+index+'" name="tImgId"></div>')
		            	 div.find('.demo-delete').on('click', function() {
		                     delete files[index]; //删除对应的文件
		                     $(this).parent().remove();
		                 }); 
		             });
			   	}
		   	   ,done: function(res, index, upload){
	   	    		$("#imgId_"+index).val(res.fileName);
	   	    		$("#tImgId_"+index).val(res.thumbnails);
	   	    	 	console.log($("#imgId_"+index).val());
		   	    	$(".demo-delete").each(function(){
		   	    	    $(this).remove();
		   	        });
		   	    	delete this.files[index];
		   	    }
		   	  });
		   	$('.delImg').on("click",function(){
		   		var imgId = $(this).val();
		   		var obj = $(this);
		   		$.ajax({
	                url: "${ctx}/semiFinishedGoods/deleteImg",
	                data: {imgId:imgId},
	                method: 'POST',
	                async:false,
	                success: function (data) {
	                    $(obj).parent().remove();
	                }
	            });
		   	});
	    });
		document.getElementById("rollback").addEventListener("click",function(){
		    window.history.back();
		})
	</script>
</body>
</html>



